<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
 Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="toolBox.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>toolBox.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		No overview generated for 'toolBox.js'<BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="toolBox.html">toolBox</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * Toolbox of the editor, where all the tools are avaiable to be used.
 * <span class="attrib">@author</span> Roosevelt de Lima Sardinha
 * <span class="attrib">@constructor</span>	
*/</span>
<span class="reserved">function</span> toolBox(id, properties)
{
	<span class="comment">//initialize variables</span>
	var thisObject = <span class="reserved">this</span>;
	
	<span class="comment">/**
	 * The workspace this toolbox belongs to.
	 * <span class="attrib">@type</span> {Object}  
	 */</span>
	<span class="reserved">this</span>.workspace = properties.workspace;
	
	<span class="comment">/**
	 * The object that contains the initial properties of the toolbox.
	 * <span class="attrib">@type</span> {Object} 
	 */</span>
	<span class="reserved">this</span>.properties = properties;
	
	<span class="comment">/**
	 * The id of the toolbox.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.id = id;
	
	<span class="comment">/**
	 * The list of tools this toolbox contains.
	 * <span class="attrib">@type</span> {Array}
	 */</span>
	<span class="reserved">this</span>.toolList = [];
	
	<span class="comment">/**
	 * The path of the CSS stylesheet file.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.cssPath = <span class="reserved">this</span>.properties.cssPath ? <span class="reserved">this</span>.properties.cssPath : <span class="literal">"css/boxes/toolBox.css"</span>;
	
	<span class="comment">/**
	 * The title of this toolbox.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.title = <span class="reserved">this</span>.properties.title ? <span class="reserved">this</span>.properties.title : <span class="literal">'Toolbox'</span>;
	
	<span class="comment">/**
	 * The left coordinate of the toolbox.
	 * <span class="attrib">@type</span> {Int}
	 */</span>
	<span class="reserved">this</span>.left = <span class="reserved">this</span>.properties.left ? parseInt(<span class="reserved">this</span>.properties.left) : 0;
	
	<span class="comment">/**
	 * The top coordinate of the toolbox.
	 * <span class="attrib">@type</span> {Int}
	 */</span> 
	<span class="reserved">this</span>.top = <span class="reserved">this</span>.properties.top ? parseInt(<span class="reserved">this</span>.properties.top) : 0;
	
	<span class="comment">/**
	 * The width of the toolbox.
	 * <span class="attrib">@type</span> {Int}
	 */</span>
	<span class="reserved">this</span>.width = <span class="reserved">this</span>.properties.width ? parseInt(<span class="reserved">this</span>.properties.width) : 100;
	
	<span class="comment">/**
	 * The height of the toolbox.
	 * <span class="attrib">@type</span> {Int}
	 */</span>
	<span class="reserved">this</span>.height = <span class="reserved">this</span>.properties.height ? parseInt(<span class="reserved">this</span>.properties.height) : 400;

	<span class="comment">/** 
	 * The id of the DOM node that contains this toolbox.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.parentId = <span class="reserved">this</span>.properties.parent;
	var parent = document.getElementById(<span class="reserved">this</span>.parentId);

	
	<span class="comment">//Events</span>
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drag the toolbox.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the toolbox while dragging.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the toolbox while dragging.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox being dragged.
	 */</span>
	<span class="reserved">this</span>.onDrag = <span class="reserved">function</span>(x,y, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drop the toolbox.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the toolbox when dropped.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the toolbox when dropped.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox being dropped.
	 */</span>
	<span class="reserved">this</span>.onDrop = <span class="reserved">function</span>(x,y, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you start to resize the toolbox.
	 * <span class="attrib">@param</span> {Int} width The width of the toolbox when you start to resize.
	 * <span class="attrib">@param</span> {Int} height The height of the toolbox when you start to resize.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox being resized.
	 */</span>
	<span class="reserved">this</span>.onBeforeResize = <span class="reserved">function</span>(width, height, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done during resize.
	 * <span class="attrib">@param</span> {Int} width The width of the toolbox during resize.
	 * <span class="attrib">@param</span> {Int} height The height of the toolbox during resize.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox being resized.
	 */</span>
	<span class="reserved">this</span>.onResize = <span class="reserved">function</span>(width, height, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done after resize.
	 * <span class="attrib">@param</span> {Int} width The width of the toolbox after resize.
	 * <span class="attrib">@param</span> {Int} height The height of the toolbox after resize.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox resized.
	 */</span>
	<span class="reserved">this</span>.onAfterResize = <span class="reserved">function</span>(width, height, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you remove this toolbox.
	 */</span>
	<span class="reserved">this</span>.onRemove = <span class="reserved">function</span>(){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you restore the size of this toolbox.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox the size was restored.
	 */</span>
	<span class="reserved">this</span>.onRestoreSize = <span class="reserved">function</span>(toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you add a tool to the toolbox.
	 * <span class="attrib">@param</span> {Object} id The id of the tool.
	 * <span class="attrib">@param</span> {Object} label The label of the tool.
	 * <span class="attrib">@param</span> {Object} properties The properties object passed to the addTool method.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox where the tool was added.
	 */</span>
	<span class="reserved">this</span>.onAddTool = <span class="reserved">function</span>(id, label, properties, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when removing all the tools of the toolbox
	 * <span class="attrib">@param</span> {Object} toolBox This toolbox.
	 */</span>
	<span class="reserved">this</span>.onRemoveAllTools = <span class="reserved">function</span>(toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when loading a profile.
	 * <span class="attrib">@param</span> {Object} profile_id The id of the profile being loaded
	 * <span class="attrib">@param</span> {Object} properties The properties of the tools in the profile, like hint, propertyBox and instructionBox.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox where the profile is being loaded.
	 */</span>
	<span class="reserved">this</span>.onLoadProfile = <span class="reserved">function</span>(profile_id, properties, toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what to do when dragging a tool.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox from where the tool has been dragged.
	 */</span>
	<span class="reserved">this</span>.onDragTool = <span class="reserved">function</span>(toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what to do when dropping a tool.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox from where the tool has been dragged.
	 */</span>
	<span class="reserved">this</span>.onDropTool = <span class="reserved">function</span>(toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what to do when the cursor is over a tool
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox that the tool belongs to.
	 */</span>
	<span class="reserved">this</span>.onMouseOverTool = <span class="reserved">function</span>(toolBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what to do when clicking a tool.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox that the tool belongs to.
	 */</span>
	<span class="reserved">this</span>.onClickTool = <span class="reserved">function</span>(toolBox){};	
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what to do when the cursor leaves a tool.
	 * <span class="attrib">@param</span> {Object} toolBox The toolbox that the tool belongs to.
	 */</span>	
	<span class="reserved">this</span>.onMouseOutTool = <span class="reserved">function</span>(toolBox){};
	

	<span class="comment">//gets the initial size and position of the object</span>
	var iniLeft = parseInt(properties.left);
	var iniTop = parseInt(properties.top);
	var iniWidth = parseInt(properties.width);
	var iniHeight = parseInt(properties.height);

	<span class="comment">//code for the divs: background of the object and the div where the user work	</span>

	<span class="comment">//create toolbox background</span>
	var toolBoxBg = document.createElement(<span class="literal">'div'</span>);
	toolBoxBg.id = <span class="reserved">this</span>.id + <span class="literal">'Bg'</span>;
	toolBoxBg.className = <span class="literal">'tool-box'</span>;
	toolBoxBg.style.borderWidth = <span class="literal">"4px"</span>;
	toolBoxBg.style.position = <span class="literal">'absolute'</span>;
	toolBoxBg.style.left = <span class="reserved">this</span>.left + <span class="literal">'px'</span>;
	toolBoxBg.style.top = <span class="reserved">this</span>.top + <span class="literal">'px'</span>;
	toolBoxBg.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
	toolBoxBg.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;	
	
	<span class="comment">//create toolbox header	</span>
	var toolBoxHeader = document.createElement(<span class="literal">'div'</span>);
	toolBoxHeader.id = <span class="reserved">this</span>.id + <span class="literal">'Header'</span>;
	toolBoxHeader.className = <span class="literal">'tool-box-header'</span>;
	toolBoxHeader.innerHTML = <span class="reserved">this</span>.title;
	toolBoxHeader.ondblclick = <span class="reserved">function</span>() {	
		thisObject.setLeft(iniLeft);
		thisObject.setTop(iniTop);
		thisObject.setWidth(iniWidth);
		thisObject.setHeight(iniHeight);
		thisObject.onRestoreSize(thisObject);
	};

	<span class="comment">//create table inside the toolbox</span>
	var toolTable = document.createElement(<span class="literal">'table'</span>);
	toolTable.id = <span class="literal">'toolTable'</span>;
	toolTable.className = <span class="literal">'tool-table'</span>;
	toolTable.border = <span class="literal">'0'</span>;
	
	<span class="comment">/**
	 * Adds a tool to the toolbox.
	 * <span class="attrib">@param</span> {String} id The id of the tool. The same name of the folder where the files corresponding to the tools are installed. 
	 * All the 3 files (.js, .css and .png) should have the same name as the folder.
	 * <span class="attrib">@param</span> {String} label The label to be presented to the user.
	 * <span class="attrib">@param</span> {Object} properties The properties to be passed for the tool. 
	 */</span>
	<span class="reserved">this</span>.addTool = <span class="reserved">function</span>(id, label, properties)
	{
		<span class="comment">// Adds the image of a tool  and the corresponding text to the toolBox</span>
		<span class="comment">// Possible properties are hint, instructionObject, instruction</span>
		var toolIcon = document.createElement(<span class="literal">'img'</span>);
		toolIcon.className = <span class="literal">'tool-icon'</span>;
		toolIcon.src = APP_HOME + <span class="literal">"js/tools/"</span> + id + <span class="literal">"/"</span> + id + <span class="literal">".png"</span>;
		toolIcon.title = properties.hint;
		toolIcon.id = id;
		toolIcon.style.width =<span class="literal">'25px'</span>;
		toolIcon.style.height = <span class="literal">'25px'</span>;
		toolIcon.instructionBox = properties.instructionBox;
		toolIcon.propertyBox = properties.propertyBox;
		
		<span class="comment">//Loading tool</span>
		var documentHead = document.getElementsByTagName(<span class="literal">'head'</span>)[0];
		var script = document.createElement(<span class="literal">'script'</span>);
		script.type = <span class="literal">'text/javascript'</span>;
		var path = APP_HOME + <span class="literal">"js/tools/"</span> + id + <span class="literal">"/"</span> + id + <span class="literal">".js"</span>
		script.src = path;
		documentHead.appendChild(script);
		
		var link = document.createElement(<span class="literal">'link'</span>);
		link.rel = <span class="literal">"stylesheet"</span>;
		link.type=<span class="literal">"text/css"</span>;
		link.href= APP_HOME + <span class="literal">"js/tools/"</span> + id + <span class="literal">"/"</span> + id + <span class="literal">".css"</span>;
		documentHead.appendChild(link);

		toolIcon.name = id;

		toolIcon.onmouseover = <span class="reserved">function</span>(){
			<span class="reserved">if</span> (properties.instructionBox != null)
			{
				thisObject.workspace.getInstructionBoxById(properties.instructionBox).setInstruction(properties.help, false);
			}
			thisObject.onMouseOverTool(thisObject);
		}
		toolIcon.onmouseout = <span class="reserved">function</span>(){
			<span class="reserved">if</span> (properties.instructionBox != null)
			{
				thisObject.workspace.getInstructionBoxById(properties.instructionBox).clearInstruction();
			}
			thisObject.onMouseOutTool(thisObject);
		}
		toolIcon.onclick = <span class="reserved">function</span>(){
			<span class="reserved">if</span> (properties.instructionBox != null)
			{
				thisObject.workspace.getInstructionBoxById(properties.instructionBox).setInstruction(properties.help, true);
			}
			thisObject.onClickTool(thisObject);
		}		
		var row = toolTable.insertRow(-1);
		var cell = row.insertCell(-1);
		cell.className = <span class="literal">'tool-cell'</span>;
		var cell = row.insertCell(-1);
		cell.className = <span class="literal">'tool-text-cell'</span>;

		toolTable.rows[toolTable.rows.length - 1].cells[0].appendChild(toolIcon);

		toolTextNode = document.createTextNode(label);
		toolTable.rows[toolTable.rows.length - 1].cells[1].appendChild(toolTextNode);

		$(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).resizable(<span class="literal">'option'</span>, <span class="literal">'minWidth'</span>, toolTable.offsetWidth + toolTable.offsetLeft);
		$(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).resizable(<span class="literal">'option'</span>, <span class="literal">'minHeight'</span>, toolTable.offsetHeight + toolTable.offsetTop);
		
		<span class="comment">// Makes the icon draggable.</span>
		$(<span class="literal">'#'</span> + toolIcon.id).draggable({
			revert: <span class="literal">'invalid'</span>,
			helper: <span class="literal">'clone'</span>,
			drag: <span class="reserved">function</span>(event, ui){
				thisObject.onDragTool(thisObject);
			},
			stop: <span class="reserved">function</span>(event, ui){
				thisObject.onDropTool(thisObject);
			}
		});	
		
		<span class="reserved">this</span>.toolList.push(id);
		
		<span class="reserved">this</span>.onAddTool(id, label, properties, <span class="reserved">this</span>);
	}
	
	<span class="comment">/**
	 * Removes all the tools in the toolbox and its corresponding scripts from the header.
	 */</span>
	<span class="reserved">this</span>.removeAllTools = <span class="reserved">function</span>(){
		var documentHead = null;
		var script_tags = null;
		var link_tags = null;
		var num_rows =  toolTable.rows.length;
		<span class="reserved">for</span> (var i = 0; i&lt;num_rows; i++){
			toolTable.deleteRow(0);
		}
	
		documentHead = document.getElementsByTagName(<span class="literal">'head'</span>)[0];
		var toolId = <span class="literal">""</span>;
		var toolList_length = <span class="reserved">this</span>.toolList.length;
		var script_tags_length = 0;
		var link_tags_length = 0;

		<span class="reserved">for</span> (var i = 0; i &lt; toolList_length; i++) {
			toolId = <span class="reserved">this</span>.toolList[i];

			<span class="comment">// Remove script tags</span>
			script_tags = documentHead.getElementsByTagName(<span class="literal">'script'</span>);
			script_tags_length = script_tags.length;
			<span class="reserved">for</span> (var j = 0; j &lt; script_tags_length; j++){
				<span class="reserved">if</span> (script_tags[j].src == (location.protocol + <span class="literal">"//"</span> + location.hostname + <span class="literal">":"</span> + location.port + APP_HOME + <span class="literal">"js/tools/"</span> + toolId + <span class="literal">"/"</span> + toolId + <span class="literal">".js"</span>)){
					documentHead.removeChild(script_tags[j]);
					j--;
					script_tags_length--;
				} 
			}

			<span class="comment">// Remove link tags</span>
			link_tags = documentHead.getElementsByTagName(<span class="literal">'link'</span>);
			link_tags_length = link_tags.length; 
			<span class="reserved">for</span> (var j = 0; j &lt; link_tags_length; j++) {
				<span class="reserved">if</span> (link_tags[j].href == (location.protocol + <span class="literal">"//"</span> + location.hostname + <span class="literal">":"</span> + location.port + APP_HOME + <span class="literal">"js/tools/"</span> + toolId + <span class="literal">"/"</span> + toolId + <span class="literal">".css"</span>)) {
					documentHead.removeChild(link_tags[j]);
					j--;	
					link_tags_length--;
				}
			}
		}
		
		<span class="reserved">this</span>.toolList = [];
		
		<span class="reserved">this</span>.onRemoveAllTools(<span class="reserved">this</span>);
	}
	
	<span class="comment">/**
	 * Loads a profile in the toolbox.
	 * <span class="attrib">@param</span> {String} profile_id The id of the profile to be loaded.
	 * <span class="attrib">@param</span> {Object} properties The properties to be passed to the tools loaded.
	 * <span class="attrib">@return</span> The loaded profile.
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.loadProfile = <span class="reserved">function</span>(profile_id, properties){
		var req = new request();
		req.sendSincRequest(<span class="literal">'GET'</span>, null, <span class="literal">"profiles/"</span> + profile_id, <span class="reserved">function</span>(response){
			json_str = response;
		});
		json = JSON.parse(json_str);
		var types = json[<span class="literal">'type'</span>];
		<span class="reserved">for</span> (var i =0; i&lt;types.length; i++){
			<span class="reserved">this</span>.addTool(types[i], types[i], properties);	
		}
		
		<span class="reserved">this</span>.onLoadProfile(profile_id, properties, <span class="reserved">this</span>)
		
		<span class="reserved">return</span> json;
	}
	
	<span class="comment">//create toolbox</span>
	var toolBox = document.createElement(<span class="literal">'div'</span>);
	<span class="comment">/**
	 * <span class="attrib">@ignore</span>
	 */</span>
	toolBox.id = <span class="reserved">this</span>.id;
	toolBox.style.position = <span class="literal">'absolute'</span>;
	toolBox.style.left = <span class="reserved">this</span>.left + parseInt(toolBoxBg.style.borderLeftWidth) + <span class="literal">'px'</span>;
	toolBox.style.top = <span class="reserved">this</span>.top + parseInt(toolBoxBg.style.borderTopWidth) + <span class="literal">'px'</span>;
	toolBox.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
	toolBox.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;
	toolBox.appendChild(toolBoxHeader);
	toolBox.appendChild(toolTable);

	parent.appendChild(toolBoxBg);
	parent.appendChild(toolBox);

	var tableWidth = toolTable.offsetWidth + toolTable.offsetLeft;
	var tableHeight = toolTable.offsetHeight + toolTable.offsetTop;

	<span class="comment">//makes toolbox resizable</span>
	$(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).resizable({
		start: <span class="reserved">function</span>(event, ui){
			thisObject.onBeforeResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);	
		},	
		resize: <span class="reserved">function</span>(event,ui){
			thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
			thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
		},
		stop:  <span class="reserved">function</span>(event,ui){
			thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
			thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onAfterResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
		},
		containment:<span class="literal">'#'</span> + parent.id,
		minWidth: tableWidth, 
		minHeight: tableHeight
	});

	<span class="comment">//makes toolbox draggable</span>
	$(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).draggable(
		{handle:<span class="literal">'#'</span> + <span class="reserved">this</span>.id + <span class="literal">'Header'</span>,
		containment:<span class="literal">'#'</span> + parent.id,
		drag: <span class="reserved">function</span>(event,ui){
			thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
			thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrag(document.getElementById(thisObject.id).offsetLeft, document.getElementById(thisObject.id).offsetTop, thisObject);
			},

		stop: <span class="reserved">function</span>(event,ui){
			thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
			thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrop(document.getElementById(thisObject.id).offsetLeft, document.getElementById(thisObject.id).offsetTop, thisObject);
			}
		});

	<span class="comment">/**
	 * Sets the left property of the toolbox. 
	 * <span class="attrib">@param</span> {Int} left The left coordinate to be set.
	 */</span>
	<span class="reserved">this</span>.setLeft = <span class="reserved">function</span> (left){
		toolBoxBg.style.left = left + <span class="literal">'px'</span>;
		<span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>)
		{	
			toolBox.style.left = left + parseInt(toolBoxBg.style.borderLeftWidth) + <span class="literal">'px'</span>;
		}
		<span class="reserved">else</span>
		{
			toolBox.style.left = left + <span class="literal">'px'</span>;
		}
		<span class="reserved">this</span>.left = left;	
	}	

	<span class="comment">/**
	 * Sets the top property of the toolbox
	 * <span class="attrib">@param</span> {Int} top The top coordinate to be set.
	 */</span>
	<span class="reserved">this</span>.setTop = <span class="reserved">function</span> (top){
		toolBoxBg.style.top = top + <span class="literal">'px'</span>;
		<span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>)
		{
			toolBox.style.top = top + parseInt(toolBoxBg.style.borderTopWidth) + <span class="literal">'px'</span>;	
		}
		<span class="reserved">else</span>
		{
			toolBox.style.top = top + <span class="literal">'px'</span>;	
		}
		<span class="reserved">this</span>.top = top;
	}

	<span class="comment">/**
	 * Sets the width of the toolbox.
	 * <span class="attrib">@param</span> {Int} width The width to be set.
	 */</span>
	<span class="reserved">this</span>.setWidth = <span class="reserved">function</span> (width){
		toolBoxBg.style.width = width + <span class="literal">'px'</span>;
		toolBox.style.width = width + <span class="literal">'px'</span>;	
		<span class="reserved">this</span>.width = width;
	}	

	<span class="comment">/**
	 * Sets the height of the toolbox.
	 * <span class="attrib">@param</span> {Int} height The height to be set.
	 */</span>
	<span class="reserved">this</span>.setHeight = <span class="reserved">function</span> (height){
		toolBoxBg.style.height = height + <span class="literal">'px'</span>;
		toolBox.style.height = height + <span class="literal">'px'</span>;	
		<span class="reserved">this</span>.height = height;
	}			
	
	<span class="comment">/**
	 * Sets the title of the toolbox. 
	 * <span class="attrib">@param</span> {String} title The new title to be set.
	 */</span>
	<span class="reserved">this</span>.setTitle = <span class="reserved">function</span>(title){
		toolBoxHeader.innerHTML = title;
		<span class="reserved">this</span>.title = title;
	}

	<span class="comment">/**
	 * Changes a property of the toolbox to some value
	 * <span class="attrib">@param</span> {String} propertyName The name of the property to be changed.
	 * <span class="attrib">@param</span> {Any} value The value to be set to the property.
	 */</span>
	<span class="reserved">this</span>.setProperty = <span class="reserved">function</span>(propertyName, value){
		switch(propertyName){
			case <span class="literal">'height'</span>:
				<span class="reserved">this</span>.setHeight(value);
				break;
			
			case <span class="literal">'width'</span>:
				<span class="reserved">this</span>.setWidth(value);
				break;
				
			case <span class="literal">'top'</span>:
				<span class="reserved">this</span>.setTop(value);
				break;
			
			case <span class="literal">'left'</span>:
				<span class="reserved">this</span>.setLeft(value);
				break;
			
			case <span class="literal">'title'</span>:
				<span class="reserved">this</span>.setTitle(value);
				break;

			case <span class="literal">'cssPath'</span>:
				<span class="reserved">this</span>.setCSS(value);
				break;
			
			default:
				document.write(<span class="literal">'Property not found'</span>);
				break;
		}
	}

	<span class="reserved">this</span>.setLeft(<span class="reserved">this</span>.left);
	<span class="reserved">this</span>.setTop(<span class="reserved">this</span>.top);
	<span class="reserved">this</span>.setWidth(<span class="reserved">this</span>.width);
	<span class="reserved">this</span>.setHeight(<span class="reserved">this</span>.height);
	
	<span class="comment">/**
	 * Removes this toolbox.
	 */</span>
	<span class="reserved">this</span>.remove = <span class="reserved">function</span>(){
		<span class="reserved">this</span>.removeAllTools()
		toolTable.parentNode.removeChild(toolTable); 
		toolBox.parentNode.removeChild(toolBox);
		toolBoxBg.parentNode.removeChild(toolBoxBg);
		toolBoxHeader.parentNode.removeChild(toolBoxHeader);
		delete toolBox;
		delete toolBoxBg;
		delete toolBoxHeader;
		<span class="reserved">this</span>.onRemove();
	}
	
	<span class="comment">/**
	 * Sets a new CSS stylesheet to the toolbox.
	 * <span class="attrib">@param</span> {String} path The relative path of the CSS stylesheet file from the APP_HOME folder.
	 */</span>
	<span class="reserved">this</span>.setCSS = <span class="reserved">function</span>(path){
		<span class="reserved">this</span>.workspace.setCSS(<span class="reserved">this</span>, path);
	}
	<span class="reserved">this</span>.setCSS(<span class="reserved">this</span>.cssPath);
}


</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Mon Feb 21 18:12:28 2011</div>
</body>
</html>
